{extend name="admin/plugin/layout" /}

{block name="content"}
<div class="plugin-config-container">
    <div style="margin-bottom: 20px;">
        <a href="/adminapi/plugin/view/index" class="btn btn-secondary">← 返回插件列表</a>
    </div>
    
    <div class="config-form">
        <div id="configContent">
            <div class="loading">
                <div>正在加载插件配置...</div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script>
class ConfigManager extends PluginManager {
    constructor() {
        super();
        this.pluginName = this.getPluginNameFromUrl();
        if (this.pluginName) {
            this.loadConfig();
        } else {
            this.showError('插件名称参数缺失');
        }
    }

    /**
     * 从URL参数获取插件名称
     */
    getPluginNameFromUrl() {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get('plugin_name');
    }

    /**
     * 加载插件配置
     */
    async loadConfig() {
        try {
            this.showLoading('configContent');
            const data = await this.request(`${this.baseUrl}/getConfig?plugin_name=${this.pluginName}`);
            this.renderConfigForm(data);
        } catch (error) {
            this.showError('加载插件配置失败: ' + error.message);
        }
    }

    /**
     * 渲染配置表单
     */
    renderConfigForm(data) {
        const container = document.getElementById('configContent');
        if (!container) return;

        const { plugin_info, plugin_config, config_fields } = data;

        let formHtml = `
            <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 20px;">
                <h2>${plugin_info.title || this.pluginName}</h2>
                <p style="color: #6c757d; margin: 5px 0 0 0;">${plugin_info.description || '暂无描述'}</p>
                <div style="margin-top: 10px; font-size: 12px; color: #6c757d;">
                    版本: ${plugin_info.version || '1.0.0'} | 作者: ${plugin_info.author || '未知'}
                </div>
            </div>
            
            <form id="pluginConfigForm">
                <input type="hidden" name="plugin_name" value="${this.pluginName}">
        `;

        if (config_fields && config_fields.length > 0) {
            config_fields.forEach(field => {
                const value = plugin_config[field.name] || field.default || field.value || '';
                
                formHtml += `
                    <div class="form-group">
                        <label class="form-label" for="${field.name}">
                            ${field.title}
                            ${field.description ? `<div class="form-text">${field.description}</div>` : ''}
                        </label>
                `;

                switch (field.type) {
                    case 'text':
                        formHtml += `<input type="text" class="form-control" id="${field.name}" name="${field.name}" value="${value}">`;
                        break;
                    case 'textarea':
                        formHtml += `<textarea class="form-control" id="${field.name}" name="${field.name}" rows="4">${value}</textarea>`;
                        break;
                    case 'select':
                        formHtml += `<select class="form-control" id="${field.name}" name="${field.name}">`;
                        if (field.options) {
                            Object.entries(field.options).forEach(([optValue, optLabel]) => {
                                const selected = value == optValue ? 'selected' : '';
                                formHtml += `<option value="${optValue}" ${selected}>${optLabel}</option>`;
                            });
                        }
                        formHtml += `</select>`;
                        break;
                    case 'radio':
                        if (field.options) {
                            Object.entries(field.options).forEach(([optValue, optLabel]) => {
                                const checked = value == optValue ? 'checked' : '';
                                formHtml += `
                                    <label style="display: block; margin: 5px 0;">
                                        <input type="radio" name="${field.name}" value="${optValue}" ${checked}>
                                        ${optLabel}
                                    </label>
                                `;
                            });
                        }
                        break;
                    case 'checkbox':
                        const checked = value ? 'checked' : '';
                        formHtml += `
                            <label>
                                <input type="checkbox" name="${field.name}" value="1" ${checked}>
                                ${field.title}
                            </label>
                        `;
                        break;
                    default:
                        formHtml += `<input type="text" class="form-control" id="${field.name}" name="${field.name}" value="${value}">`;
                }

                formHtml += `</div>`;
            });
        } else {
            formHtml += `
                <div class="empty-state">
                    <div class="icon">⚙️</div>
                    <h3>暂无配置项</h3>
                    <p>该插件没有可配置的选项</p>
                </div>
            `;
        }

        if (config_fields && config_fields.length > 0) {
            formHtml += `
                <div style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #e9ecef;">
                    <button type="submit" class="btn btn-primary">保存配置</button>
                    <button type="button" class="btn btn-secondary" onclick="history.back()">取消</button>
                </div>
            `;
        }

        formHtml += `</form>`;

        container.innerHTML = formHtml;

        // 绑定表单提交事件
        const form = document.getElementById('pluginConfigForm');
        if (form) {
            form.addEventListener('submit', (e) => {
                e.preventDefault();
                this.saveConfig();
            });
        }
    }

    /**
     * 保存配置
     */
    async saveConfig() {
        try {
            const form = document.getElementById('pluginConfigForm');
            const formData = new FormData(form);

            await this.request(`${this.baseUrl}/saveConfig`, {
                method: 'POST',
                body: formData
            });

            this.showSuccess('配置保存成功');
        } catch (error) {
            this.showError('配置保存失败: ' + error.message);
        }
    }
}

// 初始化配置管理器
document.addEventListener('DOMContentLoaded', () => {
    window.configManager = new ConfigManager();
});
</script>
{/block}
